<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="lib :: common_header"></head>
<body>
<div th:replace="lib :: header_box"></div>
<div th:replace="lib :: menu_box (3)"></div>
<style>.haha-card .el-card__body {padding-bottom:6px;}</style>
<div class="main-box">
    <div class="main-container">
        <div th:replace="lib :: main_container_header ('项目管理', '项目管理')"></div><!-- /main_container_header -->
        <el-row class="f14" id="app" v-cloak>
            <br>
            <el-card shadow="hover" class="haha-card">
                <el-form label-width="80px" inline="true">
                    <el-form-item label="项目名称" style="margin-bottom:10px;">
                        <el-input v-model="proName" width="100%"></el-input>
                    </el-form-item>
                    <el-form-item label="项目类型" prop="type" style="margin-bottom:10px;">
                        <el-select v-model="proType" clearable placeholder="请选择" style="width:178px;">
                            <el-option
                                    v-for="item in projectTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="研究方向" style="margin-bottom:10px;">
                        <el-input v-model="proRContext"></el-input>
                    </el-form-item><br>
                    <el-form-item label="项目状态" prop="status" style="margin-bottom:10px;">
                        <el-select v-model="proStatus" clearable placeholder="请选择" style="width:178px;">
                            <el-option
                                v-for="item in projectStatuses"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="立项时间" style="margin-bottom:10px;">
                        <el-date-picker
                                style="width:350px;"
                                v-model="proDate"
                                type="daterange"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :default-time="['00:00:00', '23:59:59']"
                                @change="setTime"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-bottom:10px;">
                        <el-button type="primary" @click="getproject(projectCurrentPageNo,projectPageSize)">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
                    </el-form-item>
                </el-form>
            </el-card><br>

            <el-card shadow="hover">
               <el-button type="primary" @click ="projectHanldeAdd()">创建项目</el-button><br>
                <el-row class="mt10">
                    <template>
                        <table class="m_srchList"
                                width="100%">
                            <tr v-for="(node, index) in projectData">
                                <td class="f12">
                                    <p><a class="red b f14">{{ node.name }}</a></p>
                                    <p>类型：{{ node.type | changeProjectType }} <el-divider direction="vertical"></el-divider>
                                        当前状态：{{ node.status | changeProjectStatus }}</p>
                                    <p>创建日期：{{ node.createdate }} <el-divider direction="vertical"></el-divider>
                                        研究方向：{{ node.rcontext }}</p>
                                </td>
                                <td class="f12">
                                    <el-row :gutter="10" class="tc">
                                        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                                            <div class="mt5 mb5 mr5 ml5">
                                                <el-button icon="el-icon-edit"
                                                    style="display:block; width:100%;"
                                                    size="mini"
                                                    @click="projectHandleEdit(index, node.id)">项目修改</el-button>
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                                            <div class="mt5 mb5 mr5 ml5">
                                                <el-button icon="el-icon-search"
                                                    size="mini"
                                                    style="display:block; width:100%;"
                                                    @click="projectHandleAsscoiator(index, node.id)">项目会员</el-button>
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                                            <div class="mt5 mb5 mr5 ml5">
                                                <el-button icon="el-icon-search"
                                                    size="mini"
                                                    style="display:block; width:100%;"
                                                    @click="projectHandleMember(index, node.id)">项目成员</el-button>
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                                            <div class="mt5 mb5 mr5 ml5">
                                                <el-button icon="el-icon-search"
                                                    size="mini"
                                                    style="display:block; width:100%;"
                                                    @click="projectHandleAsset(index, node.id)">项目数据</el-button>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </td>
                            </tr>
                        </table>
                    </template>
                </el-row>

                <div class="tr mt20">
                    <el-pagination
                            mini
                            layout="sizes, prev, pager, next"
                            :page-sizes="[5, 8, 10, 15, 20, 25, 30]"
                            :page-size="projectPageSize"
                            :total="projectDataFromDB.length"
                            @current-change="handleprojectPageChange"
                            @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </el-card>
        </div><!-- /app -->
    </div>
</div>
<div th:replace="lib :: javascript_box"></div>
<script th:src="@{/lib/console/project_index.js}"></script>
</body>
</html>

